<template>
  <a-row class="login">
    <a-col :span="8" :offset="8" class="login-main">
      <h1 style="text-align: center"><rocket-two-tone />&nbsp;12306售票系统</h1>
      <a-form
          :model="loginForm"
          name="basic"
          autocomplete="off"
      >
        <a-form-item
            label=""
            name="mobile"
            :rules="[{ required: true, message: '请输入手机号!' }]"
        >
          <a-input v-model:value="loginForm.mobile" placeholder="手机号"/>
        </a-form-item>

        <a-form-item
            label=""
            name="code"
            :rules="[{ required: true, message: '请输入验证码!' }]"
        >
          <a-input v-model:value="loginForm.code">
            <template #addonAfter>
              <a @click="sendCode">获取验证码</a>
            </template>
          </a-input>
          <!--<a-input v-model:value="loginForm.code" placeholder="验证码"/>-->
        </a-form-item>

        <a-form-item>
          <a-button type="primary" block @click="login">登录</a-button>
        </a-form-item>

      </a-form>
    </a-col>
  </a-row>
</template>

<script>
import { defineComponent, reactive } from 'vue';
import axios from 'axios';
import { notification } from 'ant-design-vue';
import { useRouter } from 'vue-router'
import store from "@/store";

export default defineComponent({
  name: "login-view",
  setup() {
    const router = useRouter();

    const loginForm = reactive({
      mobile: '13000000000',
      code: '',
    });

    const sendCode = () => {
      axios.post("/member/member/send-code", {
        mobile: loginForm.mobile
      }).then(response => {
        let data = response.data;
        if (data.success) {
          notification.success({ description: '发送验证码成功！' });
          loginForm.code = "8888";
        } else {
          notification.error({ description: data.message });
        }
      });
    };

    const login = () => {
      // 使用JSON格式发送数据
      const data = {
        mobile: loginForm.mobile,
        code: loginForm.code
      };
      
      axios.post("/member/member/login", data, {
        headers: {
          'Content-Type': 'application/json'
        },
        withCredentials: false  // 明确设置不发送凭据
      }).then((response) => {
        let data = response.data;
        if (data.success) {
          notification.success({ description: '登录成功！' });
          // 登录成功，跳到控台主页
          router.push("/welcome");
          store.commit("setMember", data.content);
        } else {
          notification.error({ description: data.message });
        }
      }).catch((error) => {
        // 改进错误处理，提供更多调试信息
        console.error('登录请求失败:', error);
        console.error('错误详情:', {
          message: error.message,
          code: error.code,
          response: error.response,
          request: error.request
        });
        
        // 检查是否有响应数据
        if (error.response) {
          // 请求已发出，但服务器响应了错误状态码
          console.error('服务器响应状态:', error.response.status);
          console.error('服务器响应数据:', error.response.data);
          notification.error({ 
            description: `服务器错误: ${error.response.status}` 
          });
        } else if (error.request) {
          // 请求已发出，但没有收到响应
          notification.error({ 
            description: '网络错误：未收到服务器响应，请检查网络连接或稍后重试' 
          });
        } else {
          // 其他错误
          notification.error({ 
            description: '请求配置错误：' + error.message 
          });
        }
      });
    };

    return {
      loginForm,
      sendCode,
      login
    };
  },
});
</script>

<style>
.login-main h1 {
  font-size: 25px;
  font-weight: bold;
}
.login-main {
  margin-top: 100px;
  padding: 30px 30px 20px;
  border: 2px solid grey;
  border-radius: 10px;
  background-color: #fcfcfc;
}
</style>
